<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axis Control</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>
		<script>
			const loop = 500001;

			const data = getData(loop);

			function f(x) {
				return Math.random() - 0.5 + Math.sin(x * 0.00002) * 40 + Math.sin(x * 0.001) * 5 + Math.sin(x * 0.1) * 2;
			}

			function getData(max) {
				const data = [
					Array(loop),
					Array(loop)
				];

				for (let x = 0; x < max; x++) {
					data[0][x] = x;
					data[1][x] = f(x);
				}

				return data;
			}

			const opts = {
				title: "Axis Control",
				width: 1048,
				height: 600,
				scales: {
					x: {
						time: false,
					//	auto: false,
					//	range: [0, 6],
					},
					y: {
						auto: false,
						range: [-50, 50],
					},
				},
				series: [
					{
						label: "x",
					},
					{
						label: "sin(x)",
						stroke: "red",
					}
				],
				axes: [
					{
					//	size: 30,
						label: "X Axis Label",
						labelSize: 20,
					},
					{
						space: 50,
					//	size: 40,
						side: 1,
						label: "Y Axis Label",
						labelGap: 8,
						labelSize: 8 + 12 + 8,
						stroke: "red",
					}
				],
			};

			let u = new uPlot(opts, data, document.body);
		</script>
	</body>
</html>